<template>
  <div>
    <el-drawer title="收货地址" class="address-dialog" :visible="addressCardsVisible" size="75%" direction="btt"
      :before-close="handleClose">
      <div class="address-list">
        <div style="height: 5px"></div>
        <el-card class="card" shadow="hover" v-for="(item, index) in addresses" :key="index">
          <div class="card-top-all">
            <div class="surname">
              <div class="surname-icon">{{ item.name[0] }}</div>
            </div>
            <div class="card-top" @click="chooseTheAddress(item)">
              <div style="float: left; text-align: left">
                <div>
                  <span class="addr-name">{{ item.name }}</span>
                  <span class="addr-phone">{{ item.phone }}</span>
                </div>
                <div>
                  <span class="addr-address">{{
                      item.area + " " + item.detailAddress
                  }}</span>
                </div>
              </div>
              <div class="edit-icon" @click.stop="() => edit(item)">
                <i class="el-icon-edit"></i>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="card-bottom-all">
            <el-button type="text" style="padding-top: 2px; color: rgb(116, 116, 116)"
              @click="() => (deleteVisible = true)">
              删除
            </el-button>
          </div>
        </el-card>

      </div>
      <div class="add-address">
        <button @click="addressFormVisible = true">添加收货地址</button>
      </div>
    </el-drawer>
    <el-dialog title="确认删除该地址吗" :visible="deleteVisible" @close="() => (deleteVisible = false)" :show-close="false">
      <el-button type="primary">是</el-button>
      <el-button @click="() => (deleteVisible = false)">否</el-button>
    </el-dialog>

    <AddReceiptAddress :addressFormVisible.sync="addressFormVisible" :setAcceptAddress="chooseTheAddress">
    </AddReceiptAddress>
  </div>
</template>

<script>
import AddReceiptAddress from './AddReceiptAddress.vue';
export default {
  components: {
    AddReceiptAddress
  },
  props: {
    addressCardsVisible: {
      type: Boolean,
      default: false,
    },
    chosenAddress: {
      type: Object,
      default: () => { },
    },
    // addAddress: {
    //     type: Function,
    //     default: () => { },
    // },
  },
  data() {
    return {
      addressFormVisible: false,
      deleteVisible: false,
      addresses: [],
    };
  },
  created() {
    this.getAddresses();
  },
  watch: {
    addressFormVisible() {
      this.getAddresses()
    }
  },
  methods: {
    handleClose() {
      this.$emit("update:addressCardsVisible", false);
    },
    getAddresses() {
      let uid = this.$store.state.user["userId"];
      this.$http
        .get("/deliveryInfo/getAll", {
          params: { uid },
        })
        .then((res) => {
          this.addresses = res.data.data;
        }).catch(e => {
          console.log("获取错误，错误信息：", e);
        });
    },
    chooseTheAddress(item) {
      this.$emit("update:chosenAddress", item);
      this.handleClose();
    },
    addNewAddress() {
      // this.$emit("addAddress");
      this.addAddress();
    },
    edit(item) {
      console.log(item);
      // this.$emit("addAddress");
    },
    delete(item) {
      // this.$http
      //       .get("/deliveryInfo/deleteAddress", {
      //       params: { uid },
      //   })
      this.$http.post("/deliveryInfo/deleteAddress", item).then(res => {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success'
        })
      }).catch(e => {
          this.$notify.error({
          title: '失败',
          message: '删除失败',
        })
      });
    }
  },
  components: { AddReceiptAddress }
};
</script>

<style lang="less" scoped>
.address-list {
  background-color: rgb(242, 242, 242);
  padding-bottom: 60px;
}

.card {
  margin: 10px 10px;
  border-radius: 10px;
}

.el-divider--horizontal {
  margin: 12px 0;
}

.card-bottom-all {
  float: right;
}

.card-top-all {
  height: 55px;

  .surname {
    height: 100%;
    float: left;
    display: flex;
    align-items: center;

    .surname-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgb(255, 255, 255);
      font-size: 18px;
      width: 32px;
      height: 32px;
      margin-right: 10px;
      background: linear-gradient(to right,
          rgb(192, 230, 255),
          rgb(136, 208, 255));
      border-radius: 16px;
    }
  }

  .card-top {
    display: flex;
    justify-content: space-between;

    .addr-name {
      font-size: 18px;
      font-weight: bold;
    }

    .addr-phone {
      font-size: 13px;
      color: rgb(116, 116, 116);
    }

    .edit-icon {
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
  }

}

.add-address {
  position: absolute;
  bottom: 0;
  padding: 10px;
  width: 100%;
  // height: 200px;
  z-index: 999;
  background-color: #fff;
  border-top: 1px solid rgb(233, 233, 233);

  button {
    width: 80%;
    height: 45px;
    border: none;
    background-color: #ff6700;
    color: #fff;
    font-size: 18px;
    border-radius: 30px;
    outline: none;
  }
}
</style>